<template>
	<view class="container">
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="login-wrapper">
			<!-- #ifdef H5 -->
			<view class="welcome pc">贸易平台登录</view>
			<view class="welcome sp">
				<image src="/static/missing-face.png" mode="scaleToFill"></image>
				欢迎登录
			</view>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<view class="welcome">
				<image src="/static/missing-face.png" mode="scaleToFill"></image>
				欢迎登录
			</view>
			<!-- #endif -->

			<view v-if="loginType === 'phone'" class="input-content">
				<view class="input-item">
					<text class="icon icon-phone"></text>
					<input type="number" :value="phone" placeholder="输入手机号" maxlength="11" data-key="phone" @input="inputChange" />
				</view>
				<view class="input-item" v-if="codeType === 'imgCode'">
					<text class="icon icon-suo"></text>
					<input type="mobile" value="" placeholder="输入密码" maxlength="20" password data-key="password" @input="inputChange" />
				</view>
				<view class="input-item" v-if="codeType === 'imgCode'">
					<text class="icon icon-suo"></text>
					<view class="flex-item">
						<input type="mobile" value="" placeholder="输入验证码" maxlength="4" data-key="verifyCode" @input="inputChange" />
						<img-code></img-code>
					</view>
				</view>

				<view class="input-item" v-if="codeType === 'phone'">
					<text class="icon icon-suo"></text>
					<view class="flex-item">
						<input type="mobile" value="" placeholder="输入验证码" maxlength="6" data-key="verifyCode" @input="inputChange" />
						<button class="code-btn" :disabled="sendDisabled" @click="doGetVerify">{{ sendText }}</button>
					</view>
				</view>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<button v-if="loginType === 'wechat'" class="confirm-btn" @click="chooseLoginType('phone')" :disabled="submiting">手机注册登录</button>
			<button v-if="loginType === 'wechat'" class="confirm-btn" open-type="getUserInfo" @getuserinfo="miniWechatLogin"
			 :disabled="submiting" withCredentials="true">微信授权登录</button>
			<!-- #endif -->

			<view class="flex-item forget-section" v-if="loginType === 'phone'">
				<view @click="chooseCodeType('phone')" v-if="codeType === 'imgCode'">免密登陆</view>
				<view @click="chooseCodeType('imgCode')" v-if="codeType === 'phone'">密码登录</view>
				<view @click="toPassword">忘记密码</view>
			</view>

			<button v-if="loginType === 'phone'" class="confirm-btn" @click="toLogin" :disabled="submiting">登录</button>

			<view v-if="loginType === 'phone'" class="register-section">
				还没有账户?
				<text @click="toRegist">立即注册</text>
			</view>
		</view>
	</view>
</template>

<script>
	import imgCode from '@/components/imgcode.vue'
	import {
		mapMutations
	} from 'vuex'
	export default {
		components: {
			imgCode
		},
		data() {
			return {
				loginType: 'phone',
				codeType: 'phone',
				phone: '',
				password: '',
				verifyCode: '',
				submiting: false,
				sendText: '获取验证码',
				sendDisabled: false
			}
		},
		onShow() {
			this.$api.logout()
		},
		onLoad(option) {
			// #ifdef MP-WEIXIN
			this.loginType = 'wechat'
			// #endif
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key
				this[key] = e.detail.value
			},
			chooseLoginType(type) {
				this.loginType = type
			},
			chooseCodeType(type) {
				this.codeType = type
			},
			navBack() {
				uni.navigateBack()
			},
			toRegist() {
				uni.navigateTo({
					url: '/pages/public/register'
				})
			},
			toPassword() {
				uni.navigateTo({
					url: '/pages/public/password'
				})
			},
			doGetVerify() {
				if (!this.phone || this.phone.length != 11) {
					this.$api.msg('请输入11位中国手机号')
					return
				}
				this.$api.request('/sms/sendsms', {
					phone: this.phone
				}, {
					method: 'GET'
				}).then(res => {
					this.sendDisabled = true
					let sec = 60
					let interval = setInterval(() => {
						sec--
						this.sendText = sec + 's'
						if (sec <= 0) {
							this.sendDisabled = false
							this.sendText = '获取验证码'
							clearInterval(interval)
						}
					}, 1000)
				})
			},
			toLogin() {
				const imgCode = uni.getStorageSync('imgcode')
				if (this.phone.length !== 11) {
					this.$api.msg('请输入11位中国手机号')
					return
				}
				if (this.codeType == 'imgCode' && this.password.length < 6) {
					this.$api.msg('密码至少6位')
					return
				}
				if (this.verifyCode.length < 1) {
					this.$api.msg('请输入验证码')
					return
				}
				if (this.codeType == 'imgCode' && this.verifyCode.toLowerCase() !== imgCode) {
					this.$api.msg('验证码错误')
					return
				}
				this.submiting = true
				//短信验证码，短信登录
				let postUrl = '/zruser/codeLogin'
				let postData = {
					phone: this.phone,
					code: this.verifyCode,
				}
				if (this.codeType == 'imgCode') { //图片验证码，密码登录
					postUrl = '/zruser/passwordLogin'
					postData = {
						phone: this.phone,
						password: this.password,
					}
				}
				//若是App登录，则不需要保存OpenId。可直接登录
				this.$api.request(postUrl, postData, {
					failback: failres => {
						this.submiting = false
						this.$api.msg(failres.message)
					}
				}).then(res => {
					this.submiting = false
					let userInfo = res.data.userInfo
					if(!res.data.token) {
						this.$api.msg('登录失败')
						return
					} else {
						userInfo.token = res.data.token
					}
					this.$store.commit('login', userInfo)
					// uni.setStorageSync('userInfo', userInfo)
					if (userInfo.userType == 2) {
						uni.redirectTo({
							url: './step01'
						})
					}
					if (userInfo.userType == 1) {
						uni.reLaunch({
							url: '/pages/ex/index/index'
						})
					} else {
						if (this.$api.prePage().loadData) {
							this.$api.prePage().loadData()
							uni.navigateBack()
						} else {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					}
				})
			},
			miniWechatLogin(e) {
				this.submiting = true
				let loginType = 1
				let userInfo = e.detail.userInfo
				console.log(e)
				uni.showLoading()
				uni.login({
					provider: 'weixin',
					success: wxres => {
						this.$api.request('/wxmini/miniapp/load', {
							code: wxres.code,
							avatarUrl: userInfo.avatarUrl,
							nickName: userInfo.nickName
						}, {
							method: 'GET'
						}).then(res => {
							let userInfo = res.user
							if(!res.token) {
								this.$api.msg('登录失败')
								return
							} else {
								userInfo.token = res.token
							}
							this.$store.commit('login', userInfo)
							// uni.setStorageSync('userInfo', userInfo)
							if (userInfo.userType == 2) {
								uni.redirectTo({
									url: './step01'
								})
							}
							if (userInfo.userType == 1) {
								uni.reLaunch({
									url: '/pages/ex/index/index'
								})
							} else {
								if (this.$api.prePage().loadData) {
									this.$api.prePage().loadData()
									uni.navigateBack()
								} else {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
						})
					},
					complete: () => {
						this.submiting = false
						uni.hideLoading()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.container {
			display: flex;
			align-items: center;
			overflow: hidden;
			width: 100vw;
			height: 100vh;
			min-height: 700px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
			background-image: url('');
		}
	}

	/* #endif */
</style>
